<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>我是代理</title>
    <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon"/>

    <link type="text/css" rel="stylesheet" href="/template/default/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/template/default/css/ydui.css">
    <link rel="stylesheet" href="/template/default/css/common.css">
    <link type="text/css" rel="stylesheet" href="/template/default/css/custom_common.css"/>

    <style>
        .layui-layer-content {
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
        }

        .list-item {
            border-bottom: 1px solid #ddd;
            padding: 8px 5px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .list-item > span {
            flex: 1;
            text-align: center;
            padding: 0 3px;
        }

        .vertical-flex-center {
            min-height: 60vh;
        }
    </style>
</head>
<body>

<a class="tabbar" href="javascript:history.back(-1)" title="返回"><img
        src="/template/default/images/arrow_left_white.png"/><label>我是代理</label></a>
<div class="">
    <input id="agentLevel" class="hidden" value="${agentLevel!}">
    <div id="J_Tab" class="m-tab" style="height: 100%">
        <ul class="tab-nav">
            <li class="tab-nav-item tab-active"><a href="javascript:;">一级</a></li>
            <li class="tab-nav-item"><a href="javascript:;">二级</a></li>
            <li class="tab-nav-item"><a href="javascript:;">三级</a></li>
        </ul>
        <div class="tab-panel" style="min-height: 100%">
            <div class="tab-panel-item tab-active">
                <div class="list-item">
                    <span>来源</span>
                    <span>收入</span>
                    <span>时间</span>
                </div>
                <section id="J_List">
                    <div id="J_ListContent" class="list-container">

                    </div>
                </section>
                <div class="vertical-flex-center hidden" id="nodata1">
                    <img src="/template/default/images/nodata.jpg" style="max-width: 80vw;min-height: 20vh">
                    <div style="margin-top: 10px">您还没有推荐的代理，加油哦！</div>
                </div>

            </div>
            <div class="tab-panel-item">
                <section id="J_List2">
                    <div id="J_ListContent2 " class="list-container"></div>
                </section>
                <div class="vertical-flex-center hidden" id="nodata2">
                    <img src="/template/default/images/nodata.jpg" style="max-width: 80vw;min-height: 20vh">
                    <div style="margin-top: 10px" id="level2">您的级别还不够哦</div>
                </div>

            </div>
            <div class="tab-panel-item">
                <section id="J_List3">
                    <div id="J_ListContent3" class="list-container"></div>
                </section>
                <div class="vertical-flex-center hidden" id="nodata3">
                    <img src="/template/default/images/nodata.jpg" style="max-width: 80vw;min-height: 20vh">
                    <div style="margin-top: 10px" id="level3">您的级别还不够哦</div>
                </div>
                <!--<div>等级不够</div>-->

            </div>
        </div>
    </div>


</div>
<!--<label class="float-btn">筛选</label>-->
<script type="text/javascript" src="https://static.9hive.cn/global/vendor/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://static.9hive.cn/global/vendor/layer/layer.js"></script>
<script type="text/javascript" src="/template/default/js/ydui.js"></script>
<script>
    (function () {

        /* 通过自定义的方法获取数据【通常是需要定义变量当前第几页page，和每页请求的记录数pageSize】 */
        var page = 1, pageSize = 10;
        $('#J_List').infiniteScroll({
            pageSize: pageSize,
            initLoad: true,
            loadingHtml: '<img src="/template/default/images/loader.gif"class="img_32" />',
            loadListFn: function () {
                var def = $.Deferred();

                /* 通过自定义的方法获取数据 */
                $.ajax({
                    url: '/b/agentBalanceDetail/getList',
                    data: {
                        level: 1,
                        pageNumber: page
                    },
                    dataType: 'json',
//                data: {page: page, pagesize: pageSize},
                    success: function (ret) {
                        if (ret.data && ret.data.length > 0) {
                            var newHtml = "";
                            for (var i = 0; i < ret.data.length; i++) {
                                newHtml += '<a href="" class="list-item"><span>' + ret.data[i].realName + '</span><span>' + ret.data[i].addMoney + '</span><span>' + ret.data[i].createDate + '</span></a>'
                            }
                            var html = newHtml;
                            $('#J_ListContent').append(html);

                            /* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 */
                            def.resolve(ret.data);

                            /* 页码自增1 */
                            ++page;
                        } else {
                            $("#nodata1").removeClass("hidden");
                        }
                    }
                });

                return def.promise();
            }
        });

        if ("${agentLevel!}" >= 2) {    /* 通过自定义的方法获取数据【通常是需要定义变量当前第几页page，和每页请求的记录数pageSize】 */
            var page2 = 1, pageSize2 = 10;
            $('#J_List2').infiniteScroll({
                pageSize: pageSize2,
                initLoad: true,
                loadingHtml: '<img src="/template/default/images/loader.gif"class="img_32" />',
                loadListFn: function () {
                    var def2 = $.Deferred();

                    /* 通过自定义的方法获取数据 */
                    $.ajax({
                        url: '/b/agentBalanceDetail/getList',
                        data: {
                            level: 2,
                            pageNumber: page2
                        },
                        dataType: 'json',
//                data: {page: page, pagesize: pageSize},
                        success: function (ret) {
                            if (ret.data && ret.data.length > 0) {
                                var newHtml = "";
                                for (var i = 0; i < ret.data.length; i++) {
                                    newHtml += '<a href="" class="list-item"><span>' + ret.data[i].realName + '</span><span>' + ret.data[i].addMoney + '</span><span>' + ret.data[i].createDate + '</span></a>'
                                }
                                var html = newHtml;
                                $('#J_ListContent2').append(html);

                                /* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 */
                                def2.resolve(ret.data);

                                /* 页码自增1 */
                                ++page2;
                            }else {
                                $("#nodata2").removeClass("hidden");
                                $("#level2").text("您还没有推荐的代理，加油哦！");
                            }
                        }
                    });

                    return def2.promise();
                }
            });
        } else {
            $("#nodata2").removeClass("hidden");

        }
        /* 通过自定义的方法获取数据【通常是需要定义变量当前第几页page，和每页请求的记录数pageSize】 */
        if ("${agentLevel!}" == 3) {
//            alert(${agentLevel!})
            var page3 = 1, pageSize3 = 10;
            $('#J_List3').infiniteScroll({
                pageSize: pageSize3,
                initLoad: true,
                loadingHtml: '<img src="/template/default/images/loader.gif"class="img_32" />',
                loadListFn: function () {
                    var def3 = $.Deferred();

                    /* 通过自定义的方法获取数据 */
                    $.ajax({
                        url: '/b/agentBalanceDetail/getList',
                        data: {
                            level: 3,
                            pageNumber: page3
                        },
                        dataType: 'json',
//                data: {page: page, pagesize: pageSize},
                        success: function (ret) {
                            if (ret.data.length > 0) {
                                var newHtml = "";
                                for (var i = 0; i < ret.data.length; i++) {
                                    newHtml += '<a href="" class="list-item"><span>' + ret.data[i].realName + '</span><span>' + ret.data[i].addMoney + '</span><span>' + ret.data[i].createDate + '</span></a>'
                                }
                                var html = newHtml;
                                $('#J_ListContent3').append(html);

                                /* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 */
                                def3.resolve(ret.data);

                                /* 页码自增1 */
                                ++page3;
                            } else {
                                $(".list-loading").css("display", "none");
                                $("#nodata3").removeClass("hidden");
                                $("#level3").text("您还没有推荐的代理，加油哦！");

                            }
                        }
                    });

                    return def3.promise();
                }
            });
        } else {
            $("#nodata3").removeClass("hidden");
        }
    })()

</script>
<script>
    var $tab = $('#J_Tab');

    $tab.tab({
        nav: '.tab-nav-item',
        panel: '.tab-panel-item',
        activeClass: 'tab-active'
    });

    $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
//        console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
    });

    $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
//        console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
    });
</script>

</body>
</html>